<template>
  <div class="app-container">
    <el-form :model="form">
      <el-row>
        <el-col v-if="this.$store.getters.role.store_id == 0" :span="12">
          <el-form-item label="选择店铺：" :label-width="formLabelWidth">
            <el-select v-model="form.store_id" placeholder="请选择店铺" style="width: 100%;" @change="selectStore">
              <el-option
                v-for="item in stores"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="this.$store.getters.role.store_id == 0 ? 12 : 24">
          <el-form-item label="选择分类：" :label-width="formLabelWidth">
            <el-select v-model="form.good_type_id" placeholder="请选择商品分类" style="width: 100%;">
              <el-option
                v-for="item in goodTypes"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="商品名称：" :label-width="formLabelWidth">
        <el-input v-model="form.title" minlength="2" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品描述：" :label-width="formLabelWidth">
        <el-input v-model="form.describe" placeholder="请输入商品描述" />
      </el-form-item>
      <el-form-item label="商品零售价：" :label-width="formLabelWidth">
        <el-input v-model="form.base_price" type="number" min="0" placeholder="请输入商品零售价（单位元）" />
      </el-form-item>
      <el-row v-for="item in grades" :key="item.value">
        <el-col :span="24">
          <el-form-item :label="item.label+'价格：'" :label-width="formLabelWidth">
            <el-input v-model="form.price[item.value]" type="number" min="0" placeholder="请输入价格（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="item in form.shares" :key="item.rela" v-if="share_type == 3 && share_method == 1">
        <el-col :span="24">
          <el-form-item :label="item.text + '：'" :label-width="formLabelWidth">
            <el-input v-model="item.radio" type="number" min="0" placeholder="请输入分享经济(单位元)" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="新旧报单模式" :label-width="formLabelWidth">
        <el-radio-group v-model="form.new_model">
          <el-radio :label="0">新模式</el-radio>
          <el-radio :label="1">旧模式</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row v-if="form.new_model==1">
      <el-form-item label="富利指数：" :label-width="formLabelWidth">
        <el-input v-model="form.jgz" type="number" min="0" placeholder="请输入商品富利指数（单位元）" />
      </el-form-item>
      <el-form-item label="可分配到会员折扣：" :label-width="formLabelWidth">
        <el-input v-model="form.bonus_pool_one" type="number" min="0" placeholder="请输入商品可分配到会员折扣（单位元）" />
      </el-form-item>
      <el-form-item label="可分配到合伙人折扣：" :label-width="formLabelWidth">
        <el-input v-model="form.bonus_pool_two" type="number" min="0" placeholder="请输入商品可分配到合伙人折扣（单位元）" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="团购折让 ：" :label-width="formLabelWidth">
            <el-input v-model="form.team_month" type="number" min="0" placeholder="请输入团购折让（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="富利惠：" :label-width="formLabelWidth">
            <el-input v-model="form.team_year" type="number" min="0"  placeholder="请输入富利惠（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="百乐惠：" :label-width="formLabelWidth">
            <el-input v-model="form.team_recommend" type="number" min="0" placeholder="请输入百乐惠（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教育培训基金：" :label-width="formLabelWidth">
            <el-input v-model="form.team_fund" type="number" min="0" placeholder="请输入教育培训基金（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>

      </el-row>
      <el-row v-else>
          <el-form-item label="直推奖励是否循环" :label-width="formLabelWidth">
            <el-radio-group v-model="form.is_loop">
              <el-radio :label="0">循环</el-radio>
              <el-radio :label="1">不循环</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" v-for="(item,key) in form.arr_loop" :key='key' :label="'第'+(key+1)+'单奖励'">
            <el-input v-model="form.arr_loop[key]" type="number" min="0" placeholder="请输入奖励金额（单位元）" />
          </el-form-item>
          <el-form-item label="额外统一奖励" :label-width="formLabelWidth" v-if="form.is_loop == 1">
            <el-input v-model="form.added" type="number" min="0" placeholder="请输入奖励金额（单位元）" />
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-button type="danger" round plain @click="del">减少单数分配奖励</el-button>
            <el-button type="success" round plain @click="add">增加单数分配奖励</el-button>
          </el-form-item>
          <el-form-item label="报单指数：" :label-width="formLabelWidth">
            <el-input v-model="form.bd_index" type="number" min="0" placeholder="请输入商品报单指数（单位元）" />
          </el-form-item>
          <el-form-item label="虹包" :label-width="formLabelWidth">
            <el-input v-model="form.bd_member_pool" type="number" min="0" placeholder="请输入商品可分配到报单会员中心（单位元）" />
          </el-form-item>
          <el-form-item label="报单奖" :label-width="formLabelWidth">
            <el-input v-model="form.bd_partner_one" type="number" min="0" placeholder="请输入商品可分配到报单招商中心1（单位元）" />
          </el-form-item>
          <el-form-item label="招商奖" :label-width="formLabelWidth">
            <el-input v-model="form.bd_partner_two" type="number" min="0" placeholder="请输入商品可分配到报单招商中心2（单位元）" />
          </el-form-item>
          <el-form-item label="分虹" :label-width="formLabelWidth">
            <el-input v-model="form.bd_order_pool" type="number" min="0" placeholder="请输入商品可分配到报单订单中心（单位元）" />
          </el-form-item>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="分润数额：" :label-width="formLabelWidth">
            <el-input v-model="form.share_money" type="number" min="0" placeholder="请输入商品分润数额（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品规格：" :label-width="formLabelWidth">
            <el-input v-model="form.sku" placeholder="请输入商品规格" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="form.new_model == 1">
          <el-form-item label="抵扣积分上限：" :label-width="formLabelWidth">
            <el-input v-model="form.jf" type="number" min="0" placeholder="请输入此商品最多可抵扣的价格（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="form.new_model == 1 ? 12 : 24">
          <el-form-item label="设定成本：" :label-width="formLabelWidth">
            <el-input v-model="form.cost" type="number" min="0" max="99" placeholder="设定成本（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序比重：" :label-width="formLabelWidth">
            <el-input v-model="form.sort" type="number" min="0" placeholder="请输入排序比重" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品重量：" :label-width="formLabelWidth">
            <el-input v-model="form.weight" type="number" min="0" placeholder="请输入商品重量（单位克）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮寄类型：" :label-width="formLabelWidth">
            <el-select v-model="form.is_delivery_fee" placeholder="请选择邮寄类型" style="width: 100%;">
              <el-option label="包邮" :value="1" />
              <el-option label="不包邮且分单" :value="2" />
              <el-option label="不包邮且此商品单独算一单" :value="3" />
              <el-option label="不包邮且商品只按照地区和重量计算" :value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分单：" :label-width="formLabelWidth">
            <el-input v-model="form.list_num" type="number" min="0" placeholder="请输入分单数" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="销售类型：" :label-width="formLabelWidth">
            <el-select v-model="form.sale_type" placeholder="请选择销售类型" style="width: 100%;">
              <el-option label="普通" :value="1" />
              <el-option label="热销" :value="2" />
              <el-option label="店长推荐" :value="3" />
              <el-option label="新品" :value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类状态：" :label-width="formLabelWidth">
            <el-radio-group v-model="form.status">
              <el-radio-button :label="1">上架</el-radio-button>
              <el-radio-button :label="2">下架</el-radio-button>
              <el-radio-button :label="3">售罄</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单品可得积分：" :label-width="formLabelWidth">
            <el-input v-model="form.jf_send" type="number" min="0" placeholder="请输入用户购买可得积分（单位分）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品封面：" :label-width="formLabelWidth">
            <image-handle
              type="good"
              :files="files"
              :sum="1"
              @returnFile="getFile"
            />

          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="商品详情：" :label-width="formLabelWidth">
        <Tinymce ref="editor" v-model="form.detail" :height="400" @input="getContent" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="back">返 回</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import ImageHandle from '@/components/Image'
import Tinymce from '@/components/Tinymce'
import { initHandle, handle, loadGood } from '@/api/good'
export default {
  name: 'RoleHandle',
  components: { ImageHandle, Tinymce },
  data() {
    return {
      form: {
        id: 'new',
        store_id: '',
        good_type_id: '',
        sale_type: '',
        title: '',
        cover: '',
        describe: '',
        detail: '',
        sku: '',
        base_price: '',
        weight: '',
        status: '1',
        jf: '',
        jf_send: '',
        cost: '',
        sort: '',
        is_delivery_fee: '',
        list_num: '',
        price: [],
        share_money: '',
        shares: [
          {'rela':''}
        ],
        jgz: '',
        bonus_pool_one: '',
        bonus_pool_two: '',
        team_month: '',
        team_year: '',
        team_recommend: '',
        team_fund: '',
        new_model: 0,//默认0是新模式，1为旧模式
        is_loop: 0,//默认0是循环，1为不循环
        arr_loop: [
          {}
        ], //直推单数奖励 例子：第一单：800 第二单：1000 第三单：1200
        added: '',//第四弹直推奖励
        bd_index:'',//报单指数
        bd_member_pool:'',//报单会员中心池子
        bd_partner_one:'',//报单招商中心池子1 
        bd_partner_two:'',//报单招商中心池子2 
        bd_order_pool:'',//报单订单中心
      },
      formLabelWidth: '120px',
      stores: [],
      goodTypes: [],
      grades: [],
      files: [],
      share_type: 0,
      share_method: 0,
    }
  },

  mounted() {
    const id = this.$route.query.id
    if (id !== 'new') {
      this.form.id = id
      this.initHandle({ good_id: id }, 'init')
    } else {
      this.initHandle({}, 'init')
    }
  },

  methods: {
    initHandle(obj, type) {
      initHandle(obj).then(res => {
        if (res.code === 20002) {
          this.share_type = 0
          this.share_method = 0
          this.stores = res.data.data.stores
          this.goodTypes = res.data.data.good_types
          this.grades = res.data.data.grade
          this.form.price = []
          this.form.good_type_id = ''
          Message({
            message: res.data.info,
            type: 'error',
            duration: 2000
          })
          return
        }
        this.share_type = res.data.share_type
        this.share_method = res.data.share_method
        this.form.good_type_id = ''
        this.stores = res.data.stores
        this.goodTypes = res.data.good_types
        this.grades = res.data.grade
        this.form.shares = res.data.share
        this.form.price = []
        for (const index in this.grades) {
          this.form.price[index] = ''
        }
        if (this.form.id !== 'new' && type === 'init') {
          this.loadGood()
        }
      })
    },

    loadGood() {
      loadGood({ id: this.form.id }).then(res => {
        const good = res.data
        this.form.store_id = good.store_id
        this.form.good_type_id = good.good_type_id
        this.form.sale_type = good.sale_type
        this.form.title = good.title
        this.form.describe = good.describe
        this.form.detail = good.detail
        this.form.sku = good.sku
        this.form.base_price = good.base_price
        this.form.weight = good.weight
        this.form.status = good.status
        this.form.jf = good.jf
        this.form.jf_send = good.jf_send
        this.form.cost = good.cost
        this.form.sort = good.sort
        this.form.is_delivery_fee = good.is_delivery_fee
        this.form.list_num = good.list_num
        this.form.price = good.price
        this.form.share_money = good.share_money
        this.form.shares = good.shares
        this.form.new_model = good.new_model
        if (good.new_model == 0) {
            this.form.is_loop = good.is_loop
            this.form.arr_loop = good.arr_loop
            this.form.added = good.added
            this.form.bd_index = good.bd_index
            this.form.bd_member_pool = good.bd_member_pool
            this.form.bd_partner_one = good.bd_partner_one
            this.form.bd_partner_two = good.bd_partner_two
            this.form.bd_order_pool = good.bd_order_pool
        }else{
            this.form.jgz = good.jgz
            this.form.bonus_pool_one = good.bonus_pool_one
            this.form.bonus_pool_two = good.bonus_pool_two
            this.form.team_month = good.team_month
            this.form.team_year = good.team_year
            this.form.team_recommend = good.team_recommend
            this.form.team_fund = good.team_fund
        }
        
        this.files = good.files
      })
    },

    getFile(file) {
      if (file.length === 0) {
        this.form.cover = ''
        return
      }
      this.form.cover = file[0].origin
    },

    getContent(content) {
      this.form.detail = content
    },

    selectStore() {
      this.initHandle({ store_id: this.form.store_id }, 'select')
    },

    sure() {
      handle(this.form).then(res => {
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$router.push({ path: '/good/list' })
      })
    },

    back() {
      this.$router.go(-1)
    },
    // 增加
    add() {
      // 加 - 形成初始化内容 , 为arr_loop增加数据 
      var arr_loop = this.form.arr_loop
      var ini = {}
      arr_loop.push(ini)
      this.form.arr_loop = arr_loop
      // 输出确认
      console.log(this.form.arr_loop)
    },

    // 减少事件
    del() {
      // 减 - 获取form数据 并 消除最后一位数据 并 输出确认 /  / 等级选项减少
      var arr_loop = this.form.arr_loop
      if (arr_loop.length === 1) {
        this.$message({
          showClose: true,
          message: '最少需要保留一个价格!',
          type: 'warning'
        })
        return
      }
      arr_loop.pop()
      this.form.arr_loop = arr_loop
      console.log(this.form.arr_loop)
    }
  }
}
</script>
